<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          :top-value="'52'.padEnd(12, 0)"
          clearable
          @change="getData()"
          placeholder="地址查询"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.agency_name"
          clearable
          @keyup.enter.native="getData()"
          placeholder="机构名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumOrganLevel"
          clearable
          placeholder="行政级别"
          @change="getData()"
          v-model="params['org_region_lever.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-system-enum
          placeholder="银行类型"
          filterable
          type="bankClass"
          clearable
          @change="getData()"
          v-model="params['agency_type_sub.eq']"
        ></select-system-enum>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" icon="el-icon-search" :loading="loading">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="editCredit()" icon="el-icon-plus" v-if="isSystem" :loading="loading">
          新增
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-download" :loading="exportLoading" @click="downLoadFile">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <new-org
      :visible.sync="newVisible"
      @success="getData(params.index)"
      org-type="1"
      :form-data="creditInfo"
      :table-id="creditId"
    ></new-org>
  </div>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { mapGetters } from 'vuex'
import { dateFormat, msgbox } from '@/common/utils/common'
import NewOrg from '@/cadmin/views/org/NewOrg'
import { enumOrganLevel } from '@/credit/plugins/enum'
import { exportExcel } from '@/credit/mixin/taskTableProvinceUnion'
import SelectSystemEnum from '@/cadmin/components/select/SelectSystemEnum'
export default {
  components: {
    SelectSystemEnum,
    SelectAddress,
    NewOrg,
  },
  data() {
    return {
      enumOrganLevel,
      params: {
        index: 1,
        size: 15,
        'agency_type.eq': 1,
        address_code: '',
        agency_name: '',
      },
      order: {
        create_time: 'desc',
      },
      loading: false,
      tableData: [],
      tableName: 'credit_agency_info_view',
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' } },
        { attrs: { label: '行政级别', prop: 'levelLabel' } },
        { attrs: { label: '账号名称', prop: 'user_name' } },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        { attrs: { label: '联系人', prop: 'contact' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        { attrs: { label: '创建时间', prop: 'create_time' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              content: '修改机构信息',
              icon: 'fa fa-edit',
              event: this.editCredit,
              ifRender: () => this.isSystem,
            },
            {
              content: '删除',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger py-0 px-2' },
              event: this.handleDelete,
            },
          ],
        },
      ],
      totalCount: 0,
      buttonLoading: false,
      newVisible: false,
      creditInfo: {},
      creditId: '',
      exportLoading: false,
    }
  },
  computed: {
    ...mapGetters(['clientId', 'org']),
    isSystem() {
      return this.org.orgClass === 'org_credit_sys'
    },
  },
  created() {
    this.params['orWhere.service_id.eq'] = this.isSystem ? '' : this.clientId
    this.getData()
  },
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.levelLabel = enumOrganLevel[item.org_region_lever]
      return item
    },
    handleBeforeSave(data) {
      const { agency_id: agencyId, agency_name: agencyName, ...info } = data
      info.access_time = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      info.access_status = 1
      info.service_id = this.clientId
      info.access_agency_id = agencyId
      return info
    },
    handleAccessPass() {
      this.$refs.form.submit()
    },
    editCredit(data) {
      this.creditInfo = data ? { ...data } : {}
      this.creditId = data ? data.credit_agency_info_id : ''
      this.newVisible = true
    },
    fetchData(params) {
      return this.$api
        .getData(this.$serviceName, this.tableName, params, this.order || {})
        .then(res => {
          return [res]
        })
    },
    handleDelete(row = {}) {
      msgbox({
        message: `确定删除银行${row.agency_name}?`,
        beforeClose: () =>
          this.$api.deleteData(this.$serviceName, 'credit_agency_info', row.credit_agency_info_id),
      })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(err => this.$message.error(`删除失败，请重试！${err}`))
    },
    downLoadFile() {
      this.exportLoading = true
      exportExcel({
        filename: '金融机构列表',
        tableColumns: this.tableColumns,
        params: this.params,
        dataAdapter: this.dataAdapter,
        fetchData: this.fetchData,
        onLoaded: () => {
          this.exportLoading = false
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
